import { connect } from 'dva';
import React, { useState } from 'react';
import LeftContent from './LeftContent';
import styles from './index.less';
import RightContent from './RightContent';

function ProcessManager({ height }) {
  const [selectedProcessId, setSelectedProcessId] = useState();
  const [selectedCatalogId, setSelectedCatalogId] = useState('-1');

  return (
    <div className={styles.scroll_main}>
      <div className={styles.scroll_left}>
        <LeftContent
          height={height}
          onSelectProcess={selectedProcessId => {
            setSelectedProcessId(selectedProcessId);
            setSelectedCatalogId(undefined);
          }}
          onSelectDir={selectedCatalogId => {
            setSelectedCatalogId(selectedCatalogId);
            setSelectedProcessId(undefined);
          }}
        />
      </div>
      <div className={styles.scroll_content}>
        <RightContent height={height} processId={selectedProcessId} catalogId={selectedCatalogId} />
      </div>
    </div>
  );
}

export default connect(({ setting }) => ({
  height: setting.size.height,
}))(ProcessManager);
